<template>
  <div class="background">
    <BackViewList :homelist="backList" :routename="this.$route.name"/>
    <transition :name="transitionName">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import { debounce } from "lodash-es";
import BackViewList from '../../components/BackViewList.vue';

export default {
  components: { BackViewList },
  data() {
    return {
      backList: [],
      transitionName: null,
      // linkarr:['/Suspense','/love','/around', '/Supernatural','/science'],
    };
  },
  created() {
    this.getData = debounce(this.getData);
  },
  mounted() {
    this.getData();
  },

  watch: {
    $route(to, from) {
      if (to.meta.index > from.meta.index) {
        this.transitionName = "slide-left";
      } else {
        this.transitionName = "slide-right";
      }
    },
  },

  methods: {
    getData() {
      this.$axios
        .get("http://new.puncheers.com/api/v1/story/list?page=1&limit=20&category_id=2")
        .then(({ data }) => {
          this.backList = data.data;
          // console.log(this.backList);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.background {
  position: fixed;
  top: 55px;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  overflow: auto;

  .back-item {
     z-index: 999;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 80vw;
    height: 55px;
    background-color: #fff;
    text-align: center;
    line-height: 55px;
    font-size: 13px;
    color: black;

    .nav-item {
      flex: 1;

      &.router-link-exact-active {
        color: rgb(12, 237, 237);
        border-bottom: 6px solid aqua;
        transition: all 0.2s linear;
      }
    }

    .slide-right-enter-active,
    .slide-right-leave-active,
    .slide-left-enter-active,
    .slide-left-leave-active {
      transition: all 0.2s linear;
    }

    .slide-right-enter {
      transform: translate3d(-100%, 0, 0);
    }

    .slide-right-leave-active {
      transform: translate3d(100%, 0, 0);
    }

    .slide-right-enter-to {
      transform: translate3d(0, 0, 0);
    }

    .slide-left-enter {
      transform: translate3d(100%, 0, 0);
    }

    .slide-left-leave-active {
      transform: translate3d(-100%, 0, 0);
    }

    .slide-right-enter-to {
      transform: translate3d(0, 0, 0);
    }
  }
}
</style>